<template>
<section @click="clickCurrent('current')" @mousedown="clickCurrent('dragging')">
    <div :class="['custorm--modelbox', 'graphicfind-show', (custormCurrent == custormIndex)?'drag active':'drag']">
        <div v-if="custormItemData.params.isshow == '2'" class="noshow" v-bind:style="{'background-image':`url(${getPath('noshow.png')})`}"></div>
        <div style="overflow: hidden;" :style="{'background-color': custormItemData.style.bgcolor}">
            <div class="es-search arc left" v-bind:class="[custormItemData.style.align==1?'left':'center']" :style="{'background-color': custormItemData.style.bordercolor}"  v-if="custormItemData.style.borderstyle==1">
                <i class="el-icon-search ivu-icon" v-bind:style="{'color':custormItemData.style.textcolor}"></i>
                <span class="ellipsis" v-bind:style="{'color':custormItemData.style.textcolor}">{{custormItemData.style.texttip}}</span>
            </div>

            <div class="es-search round left" v-bind:class="[custormItemData.style.align==1?'left':'center']" :style="{'background-color': custormItemData.style.bordercolor}" v-if="custormItemData.style.borderstyle==2">
                <i class="el-icon-search ivu-icon" v-bind:style="{'color':custormItemData.style.textcolor}"></i>
                <span class="ellipsis" v-bind:style="{'color':custormItemData.style.textcolor}">{{custormItemData.style.texttip}}</span>
            </div>

            <div class="es-search square left"  v-bind:class="[custormItemData.style.align==1?'left':'center']" :style="{'background-color': custormItemData.style.bordercolor}" v-if="custormItemData.style.borderstyle==3">
                <i class="el-icon-search ivu-icon" v-bind:style="{'color':custormItemData.style.textcolor}"></i>
                <span class="ellipsis" v-bind:style="{'color':custormItemData.style.textcolor}">{{custormItemData.style.texttip}}</span>
            </div>
        </div>
        <div class="btn-edit-del" @click="delCurrent"><span class="btn-del iconfont icon icon-close"></span></div>
    </div>
</section>
</template>

<script>
import defaultConfig from './utils/showConfig'
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.custorm--modelbox.graphicfind-show {
    .es-search {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        background: #ffffff;
        height: 35px;
        line-height: 35px;
        margin: 12px;
        padding: 0 12px;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        .ivu-icon {
            display: inline-block;
            font-family: Ionicons;
            speak: none;
            font-style: normal;
            font-weight: 400;
            font-variant: normal;
            text-transform: none;
            text-rendering: auto;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            vertical-align: middle;
            font-size: 16px;
            font-weight: 600;
            margin-right: 8px;
        }
    }
    .es-search.arc {
        border-radius: 4px;
    }
    .es-search.round {
        border-radius: 17px;
    }
    .es-search.center {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}
</style>
